<template>
  <div>
<!--    学生日常活动管理 <br>-->
<!--    学生体育活动、外出旅游、文艺演出、聚会、等日常活动管理。-->
    <div style="" >
      <div style="margin: 10px">
        <el-button type="primary" @click="do_create">添加</el-button>

      </div>
      <div style="margin: 10px">
        <el-input v-model="queryData.data.studentNum" placeholder="请输入学号查询" style="width: 20%" clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="do_query">查询</el-button>
      </div>

    </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%; height: 400px">
      <el-table-column
          prop="id"
          label="id"
          width=""
          v-if="false">
      </el-table-column>
      <el-table-column
          prop="student.id"
          label="学号"
          width="">
      </el-table-column>
      <el-table-column
          prop="student.studentName"
          label="姓名"
          width="">
      </el-table-column>
      <el-table-column
          prop="dailyActivityType.name"
          :formatter="practiceTypeFormatter"
          label="活动类型">
      </el-table-column>
      <el-table-column
          prop="activityName"
          label="活动名称">
      </el-table-column>
      <el-table-column
          prop="activityDate"
          label="活动日期">
      </el-table-column>
      <el-table-column
          prop="activityDescription"
          label="活动描述">
      </el-table-column>
      <el-table-column
          label="操作">
        <!--       在列中插入按钮，使用scope.row进行获取当前行操作 -->
        <template slot-scope="scope">
          <el-button size="mini" type="success" round @click="do_edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" round @click="do_delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        style="margin-top: 20px"
    >
    </el-pagination>

    <el-dialog
        title="学生信息操作"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-position="left" label-width="80px" :model="formData">
        <el-form-item label="id" v-if="false">
          <el-input v-model="formData.id"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-select v-model="formData.studentId" placeholder="请选择" :disabled="theDisable">
            <el-option
                v-for="item in StudentAll"
                :key="item.id"
                :label="item.id"
                :value="item.id">
              <span style="float: left">{{ item.id }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.studentName }}</span>
            </el-option>
          </el-select>
          <!--          <el-input v-model="formData.studentId" :disabled="theDisable"></el-input>-->
        </el-form-item>

        <el-form-item label="姓名" v-if="creating">
          <el-input v-model="formData.studentName" :disabled="theDisable"></el-input>
        </el-form-item>
        <el-form-item label="活动类型">
            <el-select v-model="formData.activityType" placeholder="请选择活动类型" @change="handleIsopenSelect">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="formData.activityName"></el-input>
        </el-form-item>
        <el-form-item label="活动日期">
            <el-date-picker
                    v-model="formData.activityDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="活动描述">
          <el-input v-model="formData.activityDescription"></el-input>
        </el-form-item>
      </el-form>

      <el-button size="mini" type="primary"  @click="save" style="margin-left: 130px">保存</el-button>
      <el-button size="mini" type="primary"  @click="do_cancel" >取 消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {deleteDailyInfo, getDailyInfo, updateDailyInfo} from "@/api/data";
export default {
  name: "StudentDailyInfo",
  data() {
    /*
    TODO--更改变量名
    对应student_daily_activity表
    属性：id,activityName(活动名称),activityType(活动类型),activityDate(活动日期),activityDescription(活动描述)
    activityType使用下拉列表选择，取值在体育赛事、旅行活动、文艺演出、聚会活动之间
    */
    return {

      formData: {
        id:null,
        studentId:null,
        studentName: null,
        activityType: null,
        activityName: null,
        activityDate:null,
        activityDescription:null,
      },
      theDisable:false,
      dialogVisible: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      StudentAll:[],
      creating:true,
      tableData: {
        id:null,
        student: {
          id: null,
          studentName: null
        },
        dailyActivityType:{
          id:null,
          name:null,
        },
        activityName: null,
        activityDate:null,
        activityDescription:null,
      },
      queryData: {
        data: {
          currentPage: 1,
          studentNum: null
        }
      },
        options: [{
            value: '1',
            label: '体育活动'
        }, {
            value: '2',
            label: '外出旅游'
        }, {
            value: '3',
            label: '文艺演出'
        }, {
            value: '4',
            label: '聚会'
        }],
    }
  },
  methods: {
    practiceTypeFormatter(row, column) {  //该函数用来对社会实践的数据进行字符串转化
      const DailyId = row.dailyActivityType.id
      if (DailyId === 1) {
        return '体育活动'
      } else if (DailyId === 2) {
        return '外出旅游'
      } else if (DailyId === 3) {
        return '文艺演出'
      } else if (DailyId === 4)
        return '聚会'

    },
    handleClose() {
      this.$data.dialogVisible = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.queryData.currentPage = val
      //获取分页的数据
      this.queryData.data.currentPage = val
      getDailyInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.total
      })
    },
    do_query() {
      getDailyInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.total
        this.$data.StudentAll = res.data.studentList
      })
    },
    do_cancel(){
      this.dialogVisible = false;
      this.do_query();
    },
    do_create() {
      this.do_query()
      this.creating = false
      this.$data.formData = {}
      this.$data.theDisable = false
      this.$data.dialogVisible = true
    },
    do_edit(data) {
      this.creating = true
      this.$data.theDisable = true
      this.$data.dialogVisible = true
      this.$data.formData = data
      this.$data.formData.studentId = data.student.id
      this.$data.formData.studentName = data.student.studentName
      // this.$data.formData.activityType = data.dailyActivityType.id
      const DailyId = data.dailyActivityType.id
      if (DailyId === 1) {
        this.$data.formData.activityType= '体育活动'
      } else if (DailyId === 2) {
        this.$data.formData.activityType = '外出旅游'
      } else if (DailyId === 3) {
        this.$data.formData.activityType = '文艺演出'
      } else if (DailyId === 4) {
        this.$data.formData.activityType = '聚会'}
    },handleIsopenSelect() {
      this.$forceUpdate()
    },
    save() {
      let updateAndCreateData = {
        data: {
          formData: this.formData
        }
      }
      if (this.$data.formData.activityType === '体育活动') {
        updateAndCreateData.data.formData.activityType = 1
      } else if (this.$data.formData.activityType === '外出旅游') {
        updateAndCreateData.data.formData.activityType = 2
      } else if (this.$data.formData.activityType === '文艺演出') {
        updateAndCreateData.data.formData.activityType = 3
      } else if (this.$data.formData.activityType === '聚会') {
        updateAndCreateData.data.formData.activityType = 4
      }
      console.log(updateAndCreateData)
      updateDailyInfo(updateAndCreateData).then(res => {
        this.$data.dialogVisible = false
        if (res.code === "0") {  //表示进行编辑操作
          this.$message({
            type: 'success',
            message: '更新成功！'
          })
          this.do_query()
        } else if (res.code === "1") {  //表示进行新增操作
          this.$message({
            type: "success",
            message: "添加成功！"
          })
          this.do_query()
        } else {
          this.$message({
            type: 'info',
            message: '操作失败！'
          })
        }
        this.$data.formData = {}  //清空form表单
      })
    },
    do_delete(theId) {
      this.$confirm('此操作将永久删除该学生！是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //用户点击确认按钮
        let deleteData = {
          data: {
            deleteId: theId
          }
        }
        deleteDailyInfo(deleteData).then(res => {
          //重新查询表格数据
          this.do_query()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  mounted() {
    // getDailyInfo(this.$data.queryData).then(res => {
    //   this.tableData = res.data.tableData
    //   this.total = res.data.total
    // })
    if (sessionStorage.getItem("id")!="0"){
      this.queryData.data.studentNum = sessionStorage.getItem("id")
      this.do_query()
      sessionStorage.setItem("id","0")
    }
    else {this.do_query()}
  }
}
</script>

<style scoped>

.header_button {
  display: flex;
  padding: 20px;
}
</style>
